<script setup lang="ts">
import type {
  FormDesignerComponents,
  FormItemPerm
} from "../FormComponentMixin";
import { isReadonly } from "../FormItem";
import { generateNumber, generateStr } from "@/utils/process";
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const _value = defineModel<string>();
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");
const disabled = computed(() => {
  if (props.mode === "disable" && isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

onMounted(() => {
  console.log(config.value);
  if (!config.value.props.codetype) {
    config.value.props.codetype = "randnumber";
  }
  if (config.value.props.codetype === "randnumber") {
    _value.value = generateNumber(16);
  } else if (config.value.props.codetype === "randstring") {
    _value.value = generateStr(16).toUpperCase();
  } else if (config.value.props.codetype === "randstrnum") {
    _value.value = config.value.props.codePrefix + generateNumber(16);
  }
});
</script>

<template>
  <el-input v-model="_value" :disabled="disabled" :show-word-limit="true" />
</template>

<style scoped></style>
